import { FC } from 'react';
import classNames from 'classnames';
import { Col, Row } from 'antd';
import styles from './index.less';
import { DescriptionProps } from './interface';

const Description: FC<DescriptionProps> = ({
  label,
  className,
  children,
  labelCol,
  wrapperCol,
  ...restProps
}) => {
  const clsString = classNames(styles.description, className);
  return (
    <Col className={clsString} {...restProps}>
      <Row>
        {label && (
          <Col {...labelCol} className={styles.label}>
            {label}
          </Col>
        )}
        {children !== null && children !== undefined && (
          <Col {...wrapperCol} className={styles.detail}>
            {children}
          </Col>
        )}
      </Row>
    </Col>
  );
};

Description.defaultProps = {
  span: 24,
  labelCol: {
    span: 12
  },
  wrapperCol: {
    span: 12
  }
};

export default Description;
